<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>OA办公管理系统</title>
	<meta charset="UTF-8">
   <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="../Js/jquery.sorted.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript">
    	$(function() {
    		var username = $.cookie("username");
    		if (username == undefined) {
    			
    		} else {
    			$("#username").val(username);
    		}
    		$("#randomcode").click(function() {
    			$(this).attr("src","randomcode.do?"+Math.random());
    		});
    		$("#verify").keyup(function() { //用户在输入验证码就进行ajax异步请求
    			var ucode = $(this).val();
    			$("#res").empty();
    			$.get("randomcodeajax.do",{"v":"isRandomCodeAjax","ucode":ucode},function(data){
    				$("#res").append($(data)); //将服务器端返回的html追加span标签内
    			},"html");
    		});
    	});
    </script>
    <style type="text/css">
        body {
            padding-top: 40px;
            padding-bottom: 40px;
          	background-image:url(img/Starry.jpg);
            height:100%;
            color:white;
            font-family:"微软雅黑";
        }

        .form-signin {
	          box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
			  opacity: 1;
			  
			  -webkit-transition-timing-function: cubic-bezier(0.68, -0.25, 0.265, 0.85);
			  -webkit-transition-property: -webkit-transform,opacity,box-shadow,top,left;
			   transition-property: transform,opacity,box-shadow,top,left;
			  -webkit-transition-duration: .5s;
			   transition-duration: .5s;
			  -webkit-transform-origin: 161px 100%;
			   -ms-transform-origin: 161px 100%;
			   transform-origin: 161px 100%;
			  -webkit-transform: rotateX(0deg);
	          transform: rotateX(0deg);
			  position: relative;
			  width: 240px;
			  height: 300px;
			  position: absolute;
			  left: 0;
			  right: 0;
			  margin: auto;
			  top: 0;
			  bottom: 0;
			  padding: 100px 40px 40px 40px;
			  background: #35394a;
			  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #35394a), color-stop(100%, rgb(0, 0, 0)));
  background: -webkit-linear-gradient(230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100%);
 
  background: linear-gradient(230deg, rgba(256, 96, 74, 0) 0%, rgb(184, 185, 206) 100%);
 	
  	
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(53, 57, 74, 0)', endColorstr='rgb(0, 0, 0)',GradientType=1 );
        }
	
        .form-signin .form-signin-heading,
        .form-signin .checkbox {
            margin-bottom: 10px;
        }
        .form-signin{
        	 -webkit-tap-highlight-color: rgba(0,0,0,0);
        	background: linear-gradient(230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100%);
        	opacity:0.8;
        }
        .form-signin-heading{
        	 text-align:center;
        }
       

        .form-signin input[type="text"],
        .form-signin input[type="password"] {
            font-size: 16px;
            height: auto;
            margin-bottom: 15px;
            padding: 7px 9px;
        }
		.btn btn-large btn-primary{
			 	border-radius: 50px;
			    background: transparent;
			    padding: 10px 50px;
			    border: 2px solid #4FA1D9;
			    color: #4FA1D9;
			    background-color:#4FA1D9;
		}
	
    </style> 
</head>
		<body style="height:800px">
	<div class="container">
    <form class="form-signin" method="post" action="${pageContext.request.contextPath}/login">
        <h2 class="form-signin-heading">OA办公管理系统</h2><br/>
        <img alt="" src="img/user_icon_copy.png"width:16px;height:18px;>&nbsp;
        	<input type="text" name="user.a_id" class="input-block-level" 
        		placeholder="账号" id="user.a_id"><br/>
       <img alt="" src="img/lock_icon_copy.png"width:17px;height:19px;>&nbsp;
       		<input type="password" name="user.a_pwd" class="input-block-level"
       			 placeholder="密码">
        <p><button class="btn btn-large btn-primary" type="submit" style="margin-left:95px; background-color:white;">登录</button></p>
    </form>

</div>
</body>
</html>
		
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<script type="text/javascript" src='js/stopExecutionOnTimeout.js?t=1'></script>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/Particleground.js"></script>
    <script type="text/javascript" src="Js/Treatment.js"></script>
    <script type="text/javascript" src="js/jquery.mockjax.js"></script>
	<script type="text/javascript">
	   //粒子背景特效
	    $("body").particleground({
	        dotColor: '#E8DFE8',
	        lineColor: '#133b88'
	    });
	</script>
</html>